<?php
	$id_upload = "";
						
	foreach($foto as $row)
	{
		$id_upload	= $row["ID_UPLOAD"];
	}
?>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />
<link id="bootstrap" href="<?php echo $this->config->item('css_path');?>bootstrap/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->config->item('css_path');?>bootstrap/bootstrap-theme.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->config->item('css_path');?>supr-theme/jquery.ui.supr.css" rel="stylesheet" type="text/css"/>
<link href="<?php echo $this->config->item('css_path');?>icons.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->config->item('plugin_path');?>misc/qtip/jquery.qtip.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->config->item('plugin_path');?>misc/search/tipuesearch.css" type="text/css" rel="stylesheet" />
<link href="<?php echo $this->config->item('plugin_path');?>forms/uniform/uniform.default.css" type="text/css" rel="stylesheet" />
<link href="<?php echo $this->config->item('plugin_path');?>forms/select/select2.css" type="text/css" rel="stylesheet" />
<link href="<?php echo $this->config->item('css_path');?>main.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->config->item('css_path');?>custom.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="<?php echo $this->config->item('images_path');?>favicon.ico" />

<link rel="stylesheet" href="<?php echo base_url()?>assets/galleriffic/css/galleriffic-2.css" type="text/css" />
<style>
.slideshow img {
	vertical-align: middle;
	border: 1px solid #ccc;
	width:85%;
}
#p-head{
	background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#e8e8e8));
	background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
	background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
	background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
}
</style>

<script type="text/javascript" src="<?php echo base_url()?>assets/galleriffic/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/galleriffic/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="<?php echo base_url()?>assets/galleriffic/js/jquery.opacityrollover.js"></script>

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-default">
			<div class="panel-heading" id="p-head">
				<h4>
					<span style="float:left;margin-right:600px;">Galeri Foto Rute Jalan</span>
					<?php echo form_open_multipart('upload/save_image/'.$id)?>
						<span style="float:left">Upload Foto : &nbsp; </span>
						<input type="file" style="float:left;" name="photo">
						<button class="btn btn-primary btn-xs" type="submit">
							<span class="icon16 icomoon-icon-upload-2 white"></span> 
							Simpan
						</button>
						<br>
						<br>
						<div class="col-lg-3" style="margin-left: 835;">
							<input type="text" class="form-control elastic" placeholder="Caption Foto . . ." name="caption_foto">
						</div>
						<br>
					<?php echo form_close()?>
				</h4>
			</div>
			<div class="panel-body">
				<div class="col-lg-12">
					<?php 
						if($id_upload == NULL){
					?>
						<p>Sepertinya, belum ada foto yang diunggah sama sekali. . . </p>
					<?php }else{?>
					<div id="page">
						<div id="container">
							<!-- Start Advanced Gallery Html Containers -->
							<div id="gallery" class="content">
								<div id="controls" class="controls"></div>
								<div class="slideshow-container">
									<div id="loading" class="loader"></div>
									<div id="slideshow" class="slideshow"></div>
								</div>
								<div id="caption" class="caption-container"></div>
							</div>
							<div id="thumbs" class="navigation">
								<ul class="thumbs noscript" style="margin: 10;">
									<?php foreach($foto as $row){?>
									<li>
										<a class="thumb" name="leaf" href="<?php echo base_url().'uploads/foto_ruas/'.$id."/".$row['PATH_FOTO']?>" title="<?php echo $row['CAPTION']?>">
											<img src="<?php echo base_url().'uploads/foto_ruas/'.$id."/".$row['PATH_FOTO']?>" alt="<?php echo $row['CAPTION']?>" width="70" height="70" />
										</a>
										<div class="caption">
											<div class="download">
												<a href="javascript:hapus(<?php echo $row['ID_UPLOAD']?>,<?php echo $id;?>)">Hapus</a>
											</div>
											<div class="image-title"><?php echo $row['CAPTION']?></div>
										</div>
									</li>
									<?php }?>
								</ul>
							</div>
							<div style="clear: both;"></div>
						</div>
					</div>
					<?php }?>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
function hapus(id,id2){
	if (confirm('Are you sure you want to save this thing into the database?')) {
		document.location = "<?php echo site_url('upload/delete_image')?>/"+id+"/"+id2;
	} else {
		
	}
}
	jQuery(document).ready(function($) {
		// We only want these styles applied when javascript is enabled
		$('div.navigation').css({'width' : '300px', 'float' : 'left'});
		$('div.content').css('display', 'block');

		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs
		var onMouseOutOpacity = 0.67;
		$('#thumbs ul.thumbs li').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		
		// Initialize Advanced Galleriffic Gallery
		var gallery = $('#thumbs').galleriffic({
			delay:                     2500,
			numThumbs:                 15,
			preloadAhead:              10,
			enableTopPager:            true,
			enableBottomPager:         true,
			maxPagesToShow:            7,
			imageContainerSel:         '#slideshow',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Mainkan Slideshow',
			pauseLinkText:             'Berhentikan Slideshow',
			prevLinkText:              '&lsaquo; Foto Sebelumnya',
			nextLinkText:              'Foto Selanjutnya &rsaquo;',
			nextPageLinkText:          'Selanjutnya &rsaquo;',
			prevPageLinkText:          '&lsaquo; Sebelumnya',
			enableHistory:             false,
			autoStart:                 false,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				// 'this' refers to the gallery, which is an extension of $('#thumbs')
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				this.fadeTo('fast', 1.0);
			}
		});
	});
</script>